<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预览图</title>
    <style>
        *{
            border: 0;
            padding: 0;
        }
        body {
            width: 100%;
            height: 100%;
        }

        #body01 img {
            box-sizing: border-box;
            margin: 5px;
        }
        #body01 > a {
            display: inline-block;
        }
        #load-button {
            width: 40px;
            height: 150px;
            background-color: #5c5cd6;
            color: white;
            position: fixed;
            padding-left: 9px;
            padding-top: 14px;
            box-sizing: border-box;
            font-size: 22px;
            border-radius: 5px;
            right: 6px;
            cursor: pointer;
        }
        #load-button:hover {
            background-color: #b30000;
        }
        #load-button:active {
            background-color: #ff4d4d;
        }

    </style>
</head>
<body id="body01">
<div id="load-button">点我加载</div>



<script>
    var imgArr = $$$$$$$;

    //纵向图片，每行显示个数
    var verticalLineCount = 4;

    //横向图片，每行显示个数
    var accrossLineCount = 2;

    var index = 0;

    var body01 = document.getElementById('body01');

    var windowWidth = window.innerWidth * 0.9;

    //纵向图片宽度
    var imgWidth = windowWidth / verticalLineCount;

    //横向图片宽度
    var imgAccrossWidth = windowWidth / accrossLineCount;

    //现在body里边的img
    var currImgArr = [];

    var verticalDiv = null;

    var accrossDiv = null;

    var verticalDivCount = 0;

    var accrossDivCount = 0;

    //一次性加载多少张图片
    var imgCountPer = 20;
    //间隔时间多少毫秒
    var imgJianGe = 2000;

    //插入到这个div的前边
    var currInsertDiv = null;

    //自动加载次数
    var autoLoadCount = 0;

    //最大自动加载次数
    var maxAutoLoadCount = 20;

    var loadButton = document.getElementById('load-button');


    function load30Img() {
        //自动加载次数超出，则返回
        if(autoLoadCount >= maxAutoLoadCount && index < imgArr.length) {
            loadButton.onclick = function () {
                loadSeveralImg(imgCountPer);
            };
            console.log('自动加载结束，之后需要手动加载了');
            return;
        }
        if(index >= imgArr.length) {
            setTimeout(mergeLastTwoDiv, 1000);
            return;
        }
        autoLoadCount++;
        //加载30张图片
        var endIndex = index + imgCountPer;
        for (; (index < endIndex) && (index < imgArr.length); index++) {
            loadOneImg(imgArr[index]);
        }
        setTimeout(load30Img, imgJianGe);
    }

    //加载一张照片
    function loadOneImg(url){
        var img = document.createElement("img");
        img.src=url;
        img.style.width = imgWidth + 'px';
        img.style.borderRadius = imgWidth / 4 + 'px';
        var aTag = document.createElement("a");
        aTag.setAttribute('href', imgArr[index]);
        aTag.setAttribute('target', '_blank');
        aTag.appendChild(img);
        body01.appendChild(aTag);
        // currImgArr.push(img);
        img.onload = function(){
            // console.log(this.width);
            // console.log(this.height);
            // 打印
            if(this.width > this.height) {
                this.style.width = imgAccrossWidth + 'px';
                this.style.borderRadius = imgAccrossWidth / 6 + 'px';
                addImg2AccrossDiv(this);
            } else {
                addImg2verticalDiv(this);
            }
        };
    }

    //初始化操作
    function init() {
        verticalDiv = document.createElement('div');
        accrossDiv = document.createElement('div');
        //横纵图片div，随机顺序加载
        if(Math.floor(Math.random() * 2) == 0){
            body01.appendChild(verticalDiv);
            body01.appendChild(accrossDiv);
            currInsertDiv = verticalDiv;
        } else {
            body01.appendChild(accrossDiv);
            body01.appendChild(verticalDiv);
            currInsertDiv = accrossDiv;
        }
        verticalDivCount = 0;
        accrossDivCount = 0;
        //加载按钮，垂直居中
        loadButton.style.top = (window.innerHeight / 3) + 'px';
    }

    //添加图片，到 verticalDiv
    function addImg2verticalDiv(img) {
        //verticalLineCount  verticalDivCount  verticalDiv
        currInsertDiv = accrossDiv;
        verticalDiv.appendChild(img.parentElement);
        verticalDivCount++;
        if(verticalDivCount >= verticalLineCount) {
            //先将满了的div前置
            currInsertDiv.parentElement.insertBefore(verticalDiv, currInsertDiv);
            //再新建 verticalDiv
            verticalDiv = document.createElement('div');
            body01.appendChild(verticalDiv);
            verticalDivCount = 0;
        }
    }

    //添加图片，到 accrossDiv
    function addImg2AccrossDiv(img) {
        currInsertDiv = verticalDiv;
        accrossDiv.appendChild(img.parentElement);
        accrossDivCount++;
        if(accrossDivCount >= accrossLineCount) {
            //先将满了的div前置
            currInsertDiv.parentElement.insertBefore(accrossDiv, currInsertDiv);
            //再新建 accrossDiv
            accrossDiv = document.createElement('div');
            body01.appendChild(accrossDiv);
            accrossDivCount = 0;
        }
    }

    var editJianGeCount = 0;

    //调整加载图片时间间隔 imgJianGe
    function editImgJianGe() {
        if(editJianGeCount >= 3) {
            console.log('时间间隔增加结束，目前时间间隔：' + imgJianGe);
            return;
        }
        editJianGeCount++;
        imgJianGe += 2000;
        console.log("第" + editJianGeCount + "次：目前时间间隔：" + imgJianGe);
        //每15秒执行一次  共执行3次
        setTimeout(editImgJianGe, 15000);
    }

    //加载n张图片
    function loadSeveralImg(count) {
        if(index >= imgArr.length) {
            setTimeout(mergeLastTwoDiv, 1000);
            return;
        }
        //加载30张图片
        var endIndex = index + count;
        for (; (index < endIndex) && (index < imgArr.length); index++) {
            loadOneImg(imgArr[index]);
        }
    }

    //合并最后两个div
    function mergeLastTwoDiv() {
        if(verticalDivCount < verticalLineCount && accrossDivCount < accrossLineCount){
            verticalDiv.style.display = 'inline-block';
            accrossDiv.style.display = 'inline-block';
        }
    }

    window.onload = function() {
        //初始化操作
        init();
        console.log(imgJianGe);
        setTimeout(editImgJianGe, 15000);
        //加载图片
        load30Img();
        loadButton.onclick = function() {
            loadSeveralImg(imgCountPer);
        }
    }

</script>
</body>
</html>